
<script>
import { provide } from 'vue-demi'
import { useVModel } from '@vueuse/core'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // 双向绑定 v-model
    const activeName = useVModel(props, 'modelValue', emit)

    // 提供给子组件使用
    provide('activeName', activeName)
    console.log(activeName.value)

    // 点击事件
    const tabClick = (name, index) => {
      activeName.value = name
      // 父组件可以 @tab-click 获取到
      emit('tab-click', { name, index })
    }

    return { activeName, tabClick }
  },
  // 🔔 render 主要用于动态创建 <template></template> 模板的内容
  // render 函数也可传入参数表示组件实例，同 this 是同一个内存地址
  render (instance) {
    // 在 render 中可以通过 this 访问到组件实例
    // render 函数也可传入参数表示组件实例，同 this 是同一个内存地址
    // console.log(instance === this) // true
    // console.log(this)

    // 获取到插槽内容
    const slot = this.$slots.default()
    // console.log(slot)

    // JSX 可通过数组的 map 方法实现列表渲染
    // console.log(this.$props)

    // 因为动态生成的xtx-tabs-panel无法正常运行。
    // 所以需要动态判断节点类型，重新渲染列表
    const dynamicPanels = []
    slot.forEach((item) => {
    //   console.log(item)
      if (item.type.name === 'XtxTabsPanel') {
        dynamicPanels.push(item)
      } else {
        item.children.forEach(com => {
          dynamicPanels.push(com)
        })
      }
    })

    // 💥注意 ；jsx的表达式使用 {} 表示 {}包裹的是表达式，因此map需要用()包裹，而不是{}
    return (
      <div class="xtx-tabs">
        <nav>
          {dynamicPanels.map((item, index) => (
            <a
              href="javascript:;"
              class={{ active: this.$props.modelValue === item.props.name }}
              onClick={() => this.tabClick(item.props.name, index)}
            >
              {item.props.label}
            </a>
          ))}
        </nav>
        {slot}
      </div>
    )
  }
}
</script>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
